<template>
  <div class="container">
    <div class="top">
      <div>
        <span>
          <span>类型：&nbsp;&nbsp;</span>
          <el-input v-model="searchData.type" style="width: 240px" clearable />
        </span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>
          <span>名称：&nbsp;&nbsp;</span>
          <el-input v-model="searchData.name" style="width: 240px" clearable />
        </span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" plain @click="search">查询</el-button>
        <el-button type="primary" plain @click="handleType">类型管理</el-button>
        <el-button type="primary" @click="add">新增</el-button>
      </div>
    </div>

    <el-table :data="tableData" style="width: 100%" v-loading="loading" height="calc(100% - 20px)">
      <el-table-column type="index" label="序号" width="55"> </el-table-column>
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column label="详情">
        <template #default="scope">
          <el-button type="primary" plain @click="details(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建人"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="date" label="操作">
        <template #default="scope">
          <el-icon title="编辑" @click="edit(scope.row)">
            <Edit />
          </el-icon>
          &nbsp;
          <el-icon title="删除" @click="del(scope.row)">
            <Delete />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog title="专家库建设" v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择类型" clearable>
            <el-option v-for="item in tableDataType" :key="item.id" :label="item.type" :value="item.type" />
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <h3 style="text-align: center;">详情</h3>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.describes" placeholder="请输入描述" :rows="4" />
        </el-form-item>
        <el-form-item label="文件">
          <el-upload ref="uploadRef" style="margin-left: 0%;" v-model:file-list="fileList" accept=".pdf" :limit="1"
            :http-request="httpRequest">
            <template #trigger>
              <el-button type="primary">上传</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">
                只能上传pdf格式文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog title="专家库建设详情" v-model="show" append-to-body width="80vw" top="5%">
      <h1>描 述：</h1>
      <el-input type="textarea" v-model="describes" placeholder="请输入描述" readonly :rows="4" />
      <h1>文 件：</h1>
      <embed name="showName" :src="showUrl" style="overflow: auto; width: 100%; height: 50vh;" hidden="true">
    </el-dialog>

    <!-- 类型 -->
    <el-dialog title="类型管理" v-model="showType" append-to-body width="500px">
      <el-button type="primary" style="margin: 0 auto;" @click="addType">新增类型</el-button>
      <el-table :data="tableDataType" style="width: 100%" height="30vh">
        <el-table-column prop="type" label="类型名称" align="center"> </el-table-column>
        <el-table-column prop="date" label="操作" align="center" width="150">
          <template #default="scope">
            <el-icon title="删除" @click="delType(scope.row)">
              <Delete />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="新增类型" v-model="showTypeName" append-to-body width="400px">
      <span>类型名称：&nbsp;&nbsp;</span>
      <el-input v-model="typeName" style="width: 240px" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="makeSureType">确 定</el-button>
          <el-button @click="showTypeName = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
  import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
  import {
    getExp,
    delExp,
    addExp,
    editExp,
    uploadFile,
    getExpType,
    delExpType,
    addExpType
  } from "@/api/work";
  const {
    proxy
  } = getCurrentInstance();
  const open = ref(false)
  const showType = ref(false)
  const showTypeName = ref(false)
  const typeName = ref("")
  const searchData = ref({
    name: '',
    type: ""
  })

  function handleType() {
    showType.value = true
  }

  function addType() {
    typeName.value = ""
    showTypeName.value = true
  }

  function makeSureType() {
    if (typeName.value == "") {
      return ElMessage({
        type: 'error',
        message: '请输入类型名称',
      })
    }
    addExpType({
      type: typeName.value
    }).then(res => {
      if (res.code == 200) {
        showTypeName.value = false
        getTypeList()
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
      }
    })
  }

  const tableDataType = ref([])

  function getTypeList() {
    getExpType().then(res => {
      tableDataType.value = res.data
    })
  }
  getTypeList()

  function search() {
    getExp(searchData.value).then(res => {
      tableData.value = res.rows
    })
  }


  const tableData = ref([])
  const loading = ref(true);

  function getList() {
    loading.value = true
    getExp().then(res => {
      loading.value = false
      tableData.value = res.rows
    })
  }
  getList()


  function add() {
    open.value = true
    form.value = {}
    fileList.value = []
  }

  function edit(row) {
    fileList.value = []
    form.value = row
    if (form.value.fileName && form.value.fileUrl) {
      fileList.value = [{
        name: form.value.fileName,
        url: form.value.fileUrl
      }]
    }
    open.value = true
  }

  const show = ref(false)
  const showUrl = ref('')
  const showName = ref('')
  const describes = ref('')

  function details(row) {
    show.value = true
    describes.value = row.describes
    showUrl.value = row.fileUrl
    showName.value = row.name
  }

  const fileList = ref([])

  function httpRequest(date) {
    console.log(date)
    let file = date.file
    if (/\.pdf/.test(file.name)) {
      const formData = new FormData()
      formData.append('file', file)
      uploadFile(formData).then(res => {
        if (res.code = 200) {
          ElMessage({
            type: 'success',
            message: '上传成功',
          })
          form.value.fileName = res.data.name
          form.value.fileUrl = res.data.url
        }
      })
    } else {
      fileList.value = []
      return ElMessage({
        type: 'error',
        message: '只能上传pdf格式的文件',
      })
    }
  }

  function del(data) {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        delExp(data.id).then(res => {
          ElMessage({
            type: 'success',
            message: '已删除',
          })
          getList()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }

  function delType(data) {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        delExpType({expertTypeId:data.id}).then(res => {
          ElMessage({
            type: 'success',
            message: '已删除',
          })
          getTypeList()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }

  function cancel() {
    open.value = false
  }

  function submitForm() {
    console.log(fileList.value)
    if (fileList.value.length == 0) {
      form.value.fileName = ''
      form.value.fileUrl = ''
    }
    proxy.$refs["postRef"].validate(valid => {
      if (valid) {
        if (form.value.id != undefined) {
          editExp(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList()
          });
        } else {
          addExp(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList()
          });
        }
      }
    });
  }

  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      postCode: undefined,
      postName: undefined,
      phone: undefined
    },
    rules: {
      leaderPhone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur'
      }],
      assistantPhone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur'
      }],
    }
  });
  const {
    queryParams,
    form,
    rules
  } = toRefs(data);
</script>

<style lang='scss' scoped>
  .container {
    height: 100%;
    width: 100%;
    padding: 20px;
  }

  .top {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
  }

  .end {
    justify-content: flex-end;
  }

  :deep(.el-table .el-table__cell) {
    text-align: center;
  }

  :deep(.el-table--border::before) {
    width: 0px;
    ;
  }

  :deep(.el-table--border::after) {
    width: 0px;
    ;
  }
</style>